<template>
  <div class="app">
    计数值: {{ count }}，双倍值: {{ doubleCount }}
    <button @click="add">加</button>
    <button @click="minus">减</button>
    <button @click="asyncAdd">异步加</button>
  </div>
</template>

<script>
// 选项式 API 写法，调用 mapState、mapActions 辅助函数
import { mapState, mapActions } from 'pinia'
// 引入 store
import useCounterStore from '../store/counter'

export default {
  name: 'Counter',
  // 将 store 中的状态数据 state、getters 都映射到组件的 computed 中
  computed: {
    ...mapState(useCounterStore, ['count', 'doubleCount']),
  },
  // 将 store 中的业务逻辑都映射到组件的 methods 中
  methods: {
    ...mapActions(useCounterStore, ['add', 'minus', 'asyncAdd']),
  }
}
</script>

<style scoped>

</style>
